5分钟玩转Axure之快速创建Chart图表 您所在的位置:网站首页 axure 用例图 5分钟玩转Axure之快速创建Chart图表

5分钟玩转Axure之快速创建Chart图表

2024-07-04 23:06| 来源: 网络整理| 查看: 265

Chart图表 图表的作用Axure创建图表的三种方式总结

图表的作用

图表是我们在产品中不可或缺的一部分;它主要承担着直观表现数据和客观分析数据的作用。很多决策分析会依靠图表进行输出,分析图表在不同模式、场景和时间的变换下,所产生各不相同的联系及趋势。

Axure创建图表的三种方式 使用绘画钢笔直接绘制 在这里插入图片描述 这种方法是比较适合做静态的图表,没有交互或者交互比较简单,只是为了简单的展示而存在。 主要是先建立坐标轴,然后点击插入,点击绘画即可绘画出图形,最后点击Esc则完成图形的绘制。

在这里插入图片描述 在这里插入图片描述 2. 使用Axhub Charts元件库快捷创建 这种方法是比较推荐的,首先需要下载该元件库并导入该元件库(会提供元件库的资源下载)。直接拖出一个想要的图表(这里以折线图讲解)。 在这里插入图片描述 你会看到一个文件夹,文件夹中有axhub-line-chart、axhub-line-data、axhub-line-config。其中里面的data就是你要配置的数据,而config就是对图表的属性进行设置。(每一种图表的文件夹都是一样的) axhub-line-data、axhub-line-config是中继器,中继器的数据配置很简单,不会的同学请阅读我前面的文章(5分钟玩转Axure之中继器) 在这里插入图片描述 在这里插入图片描述 不懂怎么配置的,或者一些特殊的配置无法实现的。可以查看该元件库的使用说明: 在这里插入图片描述 可以快速实现图表的建立,而且是带基本交互的图表。在这里插入图片描述 3. 使用导入html代码的方式(需要有一点程序基础,可能会更方便) 这种方法就是我们去拷贝某种图表实现的代码,根据我们想要的效果,去修改代码的配置,然后在我们的页面中引用该html文件即可。其实这种方法和第二种方法有异曲同工之处,只是第二种方法是别人实现了代码,将代码放在服务器让你去访问从而进行展示的。如果自己搭建了服务器,那自己也可以建立属于自己的图表原件库。 以antv为例,其它的类似eCharts等等是操作都是一样的。首先选择一个我们想要实现的图表;复制其的html代码保存在电脑中,并设置为.html格式。 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在页面中拖入一个内联框架,并设置链接一个外部的url或文件点击输入文件名。最好将文件放入你的原型发布生成文件夹的下面。 在这里插入图片描述 在这里插入图片描述

总结

图表是在绘制原型时常常用到的。往往很多新手会消耗很多时间绘制图表,最后结果却并不理想,绘制的不美观、没有交互、消耗大量的精力事倍功半。这是因为方法不对,凡事可以去想最佳解决方案,在之前要去发现事物的本质是什么,这也是我们做产品经理最核心的方法。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有